<template>
	<div class="login-container">
		<el-card class="login-form" v-if="authToken == ''">
			<h2>登录</h2>
			<el-form :model="loginForm" :rules="rules" ref="loginFormRef">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="loginForm.password" placeholder="密码" show-password></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleLogin">登录</el-button>
				</el-form-item>
			</el-form>
			<div class="third-party-login">
				<el-button text @click="handleThirdPartyLogin(item.authUrl)" v-for="(item,index) in authServerList" :key="item.serverName+index">
					<img :src="item.logo" :alt="item.serverName" />
				</el-button>
			</div>
			<p class="third-party-login-text">第三方账号登录</p>
		</el-card>
		<el-card v-else class="action-link">
			<el-button type="primary" class="action-button" @click="getUserInfo">获取用户信息</el-button>
      <div class="user-info" v-if="userInfo.userName">
        <img :src="userInfo.avatar" alt="User Avatar" class="user-avatar" />
        <div class="user-details">
          <p><strong>用户名:</strong> {{ userInfo.userName }}</p>
          <p><strong>昵称:</strong> {{ userInfo.nickname }}</p>
        </div>
      </div>
			<el-button type="primary" class="action-button" @click="getEmail">获取邮箱</el-button>
      <div class="user-details" v-if="email!=''">
        <p><strong>邮箱:</strong> {{ email }}</p>
      </div>
			<el-button type="primary" class="action-button" @click="getMobile">获取手机号</el-button>
      <div class="user-details" v-if="mobile!=''">
        <p><strong>手机号:</strong> {{ mobile }}</p>
      </div>
			<el-button type="danger" class="action-button" @click="loginOut">退出登陆</el-button>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";

interface AuthServer {
  serverName:string;
  logo:string;
  authUrl:string;
}
interface UserInfo {
  userName:string;
  nickname  :string;
  avatar:string;
}
const {proxy} = <any>getCurrentInstance()
import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
import { ElMessage } from 'element-plus';
import {getSsoAuthServerLink, getSsoEmail, getSsoMobile, getSsoUserInfo} from "/@/api/system/sso/client/ssoAuthServer";
const authToken = ref('');
const loginFormRef = ref(null);
const route = useRoute();
const loginForm = reactive({
	username: '',
	password: '',
});
const authServerList = ref<AuthServer[]>([]);
const userInfo = ref<UserInfo>({} as UserInfo)
const email = ref('')
const mobile = ref('')
const rules = {
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};

const handleLogin = () => {
	(loginFormRef.value as any).validate((valid: boolean) => {
		if (valid) {
			ElMessage.success('这是演示功能，请使用下方第三方登陆');
			// 这里可以添加实际的登录逻辑
		} else {
			ElMessage.error('这是演示功能，请使用下方第三方登陆');
			return false;
		}
	});
};

const handleThirdPartyLogin = (provider: string) => {
	window.location.href = provider;
	// 这里可以添加实际的第三方登录逻辑
  //authToken.value = 'token';
};
const loginOut = ()=>{
  authToken.value = '';
}
onMounted(()=>{
  getSsoAuthServerLink().then((res:any)=>{
    res.data.data?.forEach((item:AuthServer)=>{
      authServerList.value.push({
        serverName:item.serverName,
        logo:proxy.getUpFileUrl(item.logo),
        authUrl:item.authUrl
      });
    })
  })
  const {token,appName} = route.query;
  if(token) {
    authToken.value = token as string;
  }
})
const getUserInfo = ()=>{
  getSsoUserInfo(authToken.value).then((res:any)=>{
    userInfo.value = res.data.userInfo;
  })
}
const getEmail = ()=>{
  getSsoEmail(authToken.value).then((res:any)=>{
    email.value = res.data.email;
  })
}
const getMobile = ()=>{
  getSsoMobile(authToken.value).then((res:any)=>{
    mobile.value = res.data.mobile;
  })
}
</script>

<style scoped>
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 800px;
	background-color: #f0f2f5; /* 背景颜色 */
}

.login-form {
	width: 400px; /* 调整宽度 */
	max-width: 100%;
	padding: 40px; /* 添加内边距 */
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	border-radius: 8px; /* 圆角 */
	background-color: #fff; /* 背景颜色 */
}

.login-form h2 {
	text-align: center;
	margin-bottom: 20px;
	color: #333; /* 标题颜色 */
}

.login-form .el-form-item {
	margin-bottom: 24px; /* 调整表单项间距 */
}

.login-form .el-button {
	width: 100%; /* 登录按钮宽度 */
	font-size: 16px; /* 登录按钮字体大小 */
}

.third-party-login {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}

.third-party-login img {
	width: 32px;
	height: 32px;
}

.third-party-login-text {
	text-align: center;
	margin-top: 10px;
	color: #999; /* 文字颜色 */
	font-size: 14px; /* 文字大小 */
}
.action-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	margin-top: 20px;
}

.action-button {
	width: 100%;
	margin: 10px 0;
	font-size: 16px;
	transition: all 0.3s ease;
}

.action-button:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-details p {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.user-details strong {
  font-weight: bold;
  color: #555;
}
</style>
